<template>
  <div class="company-style">
    <!-- 导航栏 start -->
    <NavBarVue :title="title" />
    <!-- 导航栏 end -->

    <!-- 内容 start -->
    <div class="content-top my-photo">
      <!-- 提示 -->
      <p class="hint">
        <span>亮眼的公司照片是公司品牌建设的重要一步</span>
        <!-- <span>照片审核中</span> -->
      </p>

      <!-- 上传 -->
      <ul class="upload">
        <!-- 已传显示 -->
        <li class="pic" v-for="(item,index) in photos" :key="index">
          <i @click="onDel(index)"></i>
          <img :src="item.sPath" />
        </li>

        <!-- 上传按钮 -->
        <li class="btn" @click="onUpload"></li>
      </ul>

      <!-- 提交 -->
      <div class="button">
        <van-button block round type="primary" :text="'提交（'+photos.length+'/9）'" color="#07f" style="font-size: 18px" @click="onSave"></van-button>
      </div>
    </div>
    <!-- 内容 end -->
  </div>
</template>

<script>
import NavBarVue from "@/components/NavBar.vue";
import { NavBar, Button, Toast } from "vant";
import { getCompanyID, getToken } from '@/util/session';
import { returnToPhoneWithData } from "@/util/phone";
export default {
  name: "photoUpload",
  components: {
    NavBarVue,
    [NavBar.name]: NavBar,
    [Button.name]: Button,
  },
  props: ["title"],
  // 定义属性
  data() {
    return {
      photos: [],
    };
  },
  mounted() {
    window.uploadCallback = this.uploadCallback;
    this.getPhotos();
  },
  // 方法集合
  methods: {
    getPhotos() {
      this.$api.get('/CompanyInfo/GetLogoAndPhotoUrl').then(res => {
        if (res.success && res.response != null && res.response.photoUrl != '') {
          this.photos = [];
          let sUrls = res.response.photoUrl;
          let rUrls = res.response.photoUrlRelative;
          let sUrlArr = sUrls.split(',');
          let rUrlArr = rUrls.split(',');
          for (let index = 0; index < sUrlArr.length; index++) {
            const sItem = sUrlArr[index];
            const rItem = rUrlArr[index];
            this.photos.push({ sPath: sItem, rPath: rItem })
          }
        }
      })
    },
    onUpload() {
      if (this.photos.length >= 9) {
        Toast.fail('已达上限');
        return;
      }
      returnToPhoneWithData({
        action: "company_upload_photos",
        personid: getCompanyID(),
        token: getToken()
      });
    },
    onSave() {
      this.$api.post('/Upload/SavePhoto', this.photos.map(it => it.rPath)).then(res => {
        if (res.success) { Toast.success('提交成功'); this.getPhotos() }
        else { Toast.fail(res.msg) }
      })
    },
    uploadCallback(result) {
      try {
        let res = JSON.parse(result);
        if (res.success)
          this.photos.push({ sPath: res.response.absolutePath, rPath: res.response.relativePath });
        else {
          Toast.fail(res.msg);
        }
      }
      catch (e) {
        console.log(e);
        Toast.fail('操作失败');
      }
    },
    onDel(index) {
      this.$api.post('/Upload/DelPhoto', this.photos[index].rPath).then(res => {
        Toast.success(res.msg);
        if (res.success) {
          this.photos.splice(index, 1);
        }
      })
    }
  },
};
</script>

<style lang="less">
/* 我的 - 上传相册 */
.company-style .my-photo {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 46px);
  background-color: #fff;
}

.company-style .my-photo .hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 0;
}

.company-style .my-photo .hint span {
  font-size: 14px;
  color: #333;
}

.company-style .my-photo .hint span + span {
  padding-top: 10px;
  color: #f00;
}

.company-style .my-photo .upload {
  display: flex;
  flex-wrap: wrap;
  // padding: 0 20px;
}

.company-style .my-photo .upload li {
  position: relative;
  width: calc(33.3% - 10px);
  height: 100px;
  border-radius: 4px;
  margin: 5px;
  background-color: #f2f2f2;
  overflow: hidden;
}

.company-style .my-photo .upload li:nth-child(3n-1) {
  width: calc(33.4% - 10px);
}

.company-style .my-photo .upload li.pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-style .my-photo .upload li.pic i {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 0 17px;
}

.company-style .my-photo .upload li.pic i::before,
.company-style .my-photo .upload li.pic i::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 8px;
  width: 1px;
  height: 10px;
  background-color: #fff;
}

.company-style .my-photo .upload li.pic i::before {
  transform: rotate(45deg);
}

.company-style .my-photo .upload li.pic i::after {
  transform: rotate(-45deg);
}

.company-style .my-photo .upload li.btn::before,
.company-style .my-photo .upload li.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #ccc;
}

.company-style .my-photo .upload li.btn::before {
  width: 2px;
  height: 30px;
  margin-top: -15px;
  margin-left: -1px;
}

.company-style .my-photo .upload li.btn::after {
  width: 30px;
  height: 2px;
  margin-top: -1px;
  margin-left: -15px;
}

.company-style .my-photo .button {
  display: flex;
  flex-direction: column;
  padding: 25px;
}
</style>